<!--
 * @Description: 车间实时数据
 * @Author: lwx
 * @Date: 2022-08-19 16:58:41
 * @LastEditors: lwx
 * @LastEditTime: 2023-04-24 15:14:58
-->
<template>
  <div class="relative">
    <div class="order_temper">
      <div class="orderNO">
          <span class="crirle skyBlue"></span>
          订单号<span class="text-style">{{ order_no }}</span>
      </div>
      <!-- <div class="temperature">
        <svg-icon icon-class="thermometer" class="mr-1"></svg-icon>温度：{{temp}}℃ 
        <svg-icon icon-class="shidu" class="mr-1 ml-1"></svg-icon>湿度：{{humidity}}%
      </div> -->
    </div>
    <div class="device-content">
      <img src="@/assets/img/line.png" class="line-image" />
      <div
        class="device-item"
        v-for="(item, index) in deviceList"
        :key="item.machine.machine_no"
        :class="`item${index + 1}`"
      >
        <div class="item-name text-overflow">
          <span
            class="round cyan"
            :class="{
              cyan: item.machine.enable === 1,
              bgRed: item.machine.enable === 0,
            }"
          ></span
          >{{ item.machine.name }}
        </div>
        <vue-seamless-scroll
          :class-option="classOption"
          :data="item.newData"
          class="seamless-warp"
        >
          <div class="params">
            <span class="gray">[状态]</span>
            <span class="qianlan">
              {{ item.machine.enable === 1 ? "启用中" : "禁用" }}</span
            >
          </div>
          <div class="params" v-for="(val, key) in item.data" :key="key">
            <span class="gray">[{{ key }}]</span>
            <span class="qianlan"> {{ val }}</span>
          </div>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import { timerMixins } from "@/common/mixins/timerMixins.js";
import { machineInfo, productOrder } from "@/api/dashboard.js";
import axios from "axios";
export default {
  mixins: [timerMixins],
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      order_no: "",
      deviceList: [],
      temp: "", //温度
      humidity: "", //湿度
    };
  },
  computed: {
    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 无缝滚动的数据量
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0.35,
        isSingleRemUnit: true,
        waitTime: 1000,
      };
    },
  },
  created() {
    //获取温度和湿度
    axios
      .get(
        "https://devapi.qweather.com/v7/weather/now?location=121.26,31.39&key=d80bffab96a840c2a0f3d7dfaccde8e1"
      )
      .then((res) => {
        let { now } = res.data;
        this.temp = now.temp;
        this.humidity = now.humidity;
      });
  },
  methods: {
    async initData() {
      const res = await productOrder();
      let orders = "";
      res.data.forEach((e) => {
        orders = orders.concat(e.order_no + " ");
      });
      this.order_no = orders;
      const { data } = await machineInfo();
      this.deviceList = data;
      this.deviceList.forEach((item) => {
        if (item.data) {
          let arr = [];
          for (const i in item.data) {
            arr.push({ [i]: item.data[i] });
          }
          item.newData = arr;
        }
      });  
    },
  },
};
</script>
<style lang='scss' scoped>
.line-image {
  position: absolute;
  width: 100%;
  top: .8rem;
}
.order_temper {
  width: 100%;
  display: flex;
  position: absolute;
  color: #17caf0;
  text-shadow: 0 0 0.0938rem #17caf0;
  font-size: 0.275rem;
  padding:  0 .1876rem;
}
.orderNO {
  flex: 1;
  width: 50%;
}
.temperature {
  flex: 1;
  text-align: right;  
  font-size: 0.28rem;
}
.text-style {
  font-size: 0.26rem;
  margin-left: 0.0625rem;
}
.device-content {
  width: 100%;
  height: 7rem;
  position: relative;
}
.device-item {
  position: absolute;
  width: 28%;
  border: 1px solid #07417a;
  box-shadow: inset 0 0 0.7rem #07417a;
  border-radius: 0.0625rem;
  box-sizing: border-box;
  padding: 0.125rem;
  font-size: 0.175rem;
  height: 1.6rem;
}
.item-name {
  font-size: 0.225rem;
  color: #68d8fe;
  padding: 0 0 0.1rem 0.0625rem;
}

.seamless-warp {
  height: 0.9rem;
  overflow: hidden;
}
.params {
  padding: .05rem .1876rem;
}
.item1 {
  left: 0.3rem;
  top: 0.6rem;
}

.item2 {
  left: 3.9rem;
  top: 0.6rem;
}
.item3 {
  right: 0.4rem;
  top: 0.6rem;
}
.item4 {
  left: 0.3rem;
  bottom: 0.5rem;
}

.item5 {
  left: 3.9rem;
  bottom: 0.5rem;
}
.item6 {
  right: 0.4rem;
  bottom: 0.5rem;
}
</style>